﻿<ribbon:RibbonWindow x:Class="NewPetrol"
        xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:ribbon="clr-namespace:Microsoft.Windows.Controls.Ribbon;assembly=RibbonControlsLibrary"
        Title="Petrol"
        x:Name="NewPetrol"
        Width="700" Height="550" xmlns:my="http://schemas.microsoft.com/wpf/2008/toolkit">
    
    <ribbon:RibbonWindow.Resources>
        <Style TargetType="Label" x:Key="MyLabel">
            <Setter Property="Foreground" Value="White" />
            <Setter Property="FontSize" Value="50"/>
            <Setter Property="Background" Value="LightBlue" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type Label}">
                        <Border BorderThickness="{TemplateBinding BorderThickness}"
                                BorderBrush="{TemplateBinding BorderBrush}"
                                Padding="{TemplateBinding Padding}"
                                SnapsToDevicePixels="true">
                            <Grid>
                                <Rectangle Fill="{TemplateBinding Background}">
                                    <Rectangle.OpacityMask>
                                        <LinearGradientBrush StartPoint="0.5,0" EndPoint="0.5,1">
                                            <GradientStop Color="#80000000" Offset="0.0" />
                                            <GradientStop Color="#E6000000" Offset="0.5" />
                                            <GradientStop Color="#80000000" Offset="1.0" />
                                        </LinearGradientBrush>
                                    </Rectangle.OpacityMask>
                                </Rectangle>
                                <ContentPresenter
                                    HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                    VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                    RecognizesAccessKey="True"
                                    SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" />
                            </Grid>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsEnabled" Value="false">
                                <Setter Property="Foreground"
                                        Value="{DynamicResource {x:Static SystemColors.GrayTextBrushKey}}"/>
                            </Trigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>
        
        <Style x:Key="{x:Type ListBoxItem}" TargetType="{x:Type ListBoxItem}">
            <Setter Property="OverridesDefaultStyle" Value="true" />
            <Setter Property="Background" Value="Transparent" />
            <Setter Property="BorderBrush" Value="Transparent" />
            <Setter Property="BorderThickness" Value="1" />
            <Setter Property="HorizontalContentAlignment" Value="Stretch" />
            <Setter Property="VerticalContentAlignment" Value="Center" />
            <Setter Property="Padding" Value="3" />
            <Setter Property="Opacity" Value=".80" />
            <Setter Property="LayoutTransform">
                <Setter.Value>
                    <ScaleTransform ScaleX="1" ScaleY="1"/>
                </Setter.Value>
            </Setter>
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="{x:Type ListBoxItem}">
                        <Border Background="{TemplateBinding Background}" 
                                BorderBrush="{TemplateBinding BorderBrush}" 
                                BorderThickness="{TemplateBinding BorderThickness}" 
                                Padding="{TemplateBinding Padding}">
                            <ContentPresenter x:Name="ContentSite" 
                                              HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}" 
                                              VerticalAlignment="{TemplateBinding VerticalContentAlignment}"/>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsSelected" Value="true">
                                <Setter Property="Background">
                                    <Setter.Value>
                                        <LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
                                            <LinearGradientBrush.GradientStops>
                                                <GradientStop Offset="0" Color="LightGray"/>
                                                <GradientStop Offset="1" Color="DarkGray"/>
                                            </LinearGradientBrush.GradientStops>
                                        </LinearGradientBrush>
                                    </Setter.Value>
                                </Setter>
                                <Setter Property="BorderBrush" Value="Silver" />
                                <Setter Property="Opacity" Value="1"/>
                            </Trigger>
                            <MultiTrigger>
                                <MultiTrigger.Conditions>
                                    <Condition Property="IsSelected" Value="true" />
                                    <Condition Property="Selector.IsSelectionActive" 
                                               Value="false" />
                                </MultiTrigger.Conditions>
                                <Setter Property="Background" Value="LightGray" />
                                <Setter Property="BorderBrush" Value="DarkGray" />
                            </MultiTrigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
            <Style.Triggers>
                <Trigger Property="IsEnabled" Value="false">
                    <Setter Property="Foreground" Value="Gray" />
                </Trigger>
                <EventTrigger RoutedEvent="Mouse.MouseEnter">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard>
                                <!--DoubleAnimation Duration="0:0:0.0"                                                 
                                                 Storyboard.TargetProperty="(ListBoxItem.LayoutTransform).(ScaleTransform.ScaleY)"
                                                 From="1" To="1.125"/>
                                    <DoubleAnimation Duration="0:0:0.0"                                                 
                                                 Storyboard.TargetProperty="(ListBoxItem.LayoutTransform).(ScaleTransform.ScaleX)"
                                                 From="1" To="1.125"/-->
                                <DoubleAnimation Duration="0:0:0.2"
                                                 Storyboard.TargetProperty="Opacity"
                                                 To="1.0" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
                <EventTrigger RoutedEvent="Mouse.MouseLeave">
                    <EventTrigger.Actions>
                        <BeginStoryboard>
                            <Storyboard>
                                <!--DoubleAnimation Duration="0:0:0.0"
                                                 Storyboard.TargetProperty="(ListBoxItem.LayoutTransform).(ScaleTransform.ScaleY)"
                                                 From="1.125" To="1"/>
                                    <DoubleAnimation Duration="0:0:0.0"                                                 
                                                 Storyboard.TargetProperty="(ListBoxItem.LayoutTransform).(ScaleTransform.ScaleX)"
                                                 From="1.125" To="1"/-->
                                <DoubleAnimation Duration="0:0:0.2"
                                                 Storyboard.TargetProperty="Opacity" />
                            </Storyboard>
                        </BeginStoryboard>
                    </EventTrigger.Actions>
                </EventTrigger>
            </Style.Triggers>
        </Style>
        <DataTemplate x:Key="listBoxTemplate">
            <Border BorderBrush="Blue"
                    BorderThickness="1"
                    CornerRadius="1"
                    Margin="1">
                <StackPanel Orientation="Horizontal">
                    <Image Height="32" Name="Image1" Width="32" Source="{Binding Path=Image}" />
                    <StackPanel Orientation="Vertical">
                        <TextBlock Text="{Binding TransactionDetails}" 
                               Foreground="Blue" 
                               FontWeight="Bold"
                                   Name="regoNumber" Margin="1"/>
                        <Label Content="{Binding VehicleDetails}" 
                               Foreground="Green" Name="PersonCode" HorizontalAlignment="Left"  VerticalAlignment="Center"/>
                    </StackPanel>
                </StackPanel>                
            </Border>
        </DataTemplate>
    </ribbon:RibbonWindow.Resources>
    
    <Grid>
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>

        <ribbon:Ribbon x:Name="Ribbon" Grid.Row="0">
            <ribbon:RibbonTab x:Name="HomeTab"
                              Header="Petrol">
                <ribbon:RibbonGroup x:Name="Action"
                                    Header="Action">
                    <ribbon:RibbonButton Label="New" 
                                         Name="RibbonButtonNew"
                                         LargeImageSource="/images/new_page-32.png" />
                    <ribbon:RibbonButton Label="Save" 
                                         Name="RibbonButtonSave"
                                         LargeImageSource="/images/filesave-32.png" />
                    <ribbon:RibbonButton Label="Delete" 
                                         Name="RibbonButtonDelete"
                                         LargeImageSource="/images/Delete-32.png" />
                    <ribbon:RibbonButton Label="Cancel" 
                                         Name="RibbonButtonCancel"
                                         LargeImageSource="/images/cancel-32.png" />
                </ribbon:RibbonGroup>
            </ribbon:RibbonTab>
        </ribbon:Ribbon>       
        <Grid Grid.Row="1">
            <Grid.ColumnDefinitions>
                <ColumnDefinition Width="auto"></ColumnDefinition>
                <ColumnDefinition Width="*"></ColumnDefinition>
            </Grid.ColumnDefinitions>           
            <Expander Width="Auto" ExpandDirection="Right" HorizontalAlignment="Right" Grid.Column="0" >
                <Expander.Header>
                    <TextBlock VerticalAlignment="Center" HorizontalAlignment="Center" RenderTransformOrigin="0.5,0.5" Margin="0,0,0,0" Width="Auto" Name="ExpanderText">
                        <TextBlock.LayoutTransform>
                            <TransformGroup>
                                <ScaleTransform ScaleX="1" ScaleY="1"/>
                                <SkewTransform AngleX="0" AngleY="0"/>
                                <RotateTransform Angle="90"/>
                                <TranslateTransform X="0" Y="0"/>
                            </TransformGroup>
                        </TextBlock.LayoutTransform>
                        <TextBlock.RenderTransform>
                            <TransformGroup>
                                <ScaleTransform ScaleX="1" ScaleY="1"/>
                                <SkewTransform AngleX="0" AngleY="0"/>
                                <RotateTransform Angle="0"/>
                                <TranslateTransform X="0" Y="0"/>
                            </TransformGroup>
                        </TextBlock.RenderTransform>
                    </TextBlock>
                </Expander.Header>
                <Border Name="borderHeader" BorderBrush="Gray" BorderThickness="1,1,1,1" CornerRadius="6,6,6,6">
                    <Grid Name="gridListbox">
                        <Grid.RowDefinitions>
                            <RowDefinition Height="auto"></RowDefinition>
                            <RowDefinition></RowDefinition>
                        </Grid.RowDefinitions>
                        
                        <TextBox MinHeight="10" MinWidth="126" Margin="2" Name="searchBox" Grid.Row="0">Search</TextBox>                            
                        
                        <ListBox Name="listBoxPetrol" 
                                 Grid.Row="1"
                                 VerticalAlignment="Top"
                                 ItemTemplate="{StaticResource listBoxTemplate}" 
                                 ItemContainerStyle="{DynamicResource ListBoxItem}" 
                                 HorizontalContentAlignment="Stretch"                                                          
                                 ItemsSource="{Binding}" 
                                 BorderThickness="0"></ListBox>
                    </Grid>
                </Border>
            </Expander> <!-- expander -->
            <Grid Grid.Column ="1">
                <Grid.RowDefinitions>
                    <RowDefinition Height="auto"></RowDefinition>
                    <RowDefinition Height="*"></RowDefinition>
                </Grid.RowDefinitions>
                <Border Name="borderHeaderTop" 
                        Grid.Row ="0" 
                        BorderBrush="Gray" 
                        BorderThickness="1,1,1,1"
                        CornerRadius="6,6,6,6">
                    <Grid >
                        <Grid.RowDefinitions>
                            <RowDefinition Height="*"></RowDefinition>
                            <RowDefinition Height="*"></RowDefinition>                            
                        </Grid.RowDefinitions>
                        <Grid.ColumnDefinitions>
                            <ColumnDefinition Width="auto"></ColumnDefinition>
                            <ColumnDefinition Width="auto"></ColumnDefinition>
                            <ColumnDefinition Width="*"></ColumnDefinition>
                        </Grid.ColumnDefinitions>
                        <Label Name="LatestTransaction" Grid.Column="0" Grid.Row="0">Last Transaction :</Label>
                        <Label Name="LabelLatestTransaction" Grid.Column="1" Grid.Row="0">Last Transaction :</Label>
                        <Label Name="FirstTransaction" Grid.Column="0" Grid.Row="1">First Transaction :</Label>
                        <Label Name= "LabelFirstTransaction" Grid.Column="1" Grid.Row="1">First Transaction :</Label>
                        <StackPanel Orientation="Horizontal" Grid.Column="2" Grid.RowSpan="2" VerticalAlignment="Center" HorizontalAlignment="Center">
                            <Label Name= "LabelTotalTransaction"   FontSize="16" FontWeight="Bold">Total Transaction :</Label>
                            <Label Name= "LabelTotalDistance"   FontSize="12" VerticalAlignment="Bottom" Foreground="Red">Total Distance :</Label>
                        </StackPanel>
                    </Grid>                    
                </Border>

                <!-- transaction -->
                <Border Name="borderHeader1" 
                        Grid.Row ="1" 
                        BorderBrush="Gray" 
                        BorderThickness="1,1,1,1"
                        CornerRadius="6,6,6,6">
                    <ScrollViewer>
                        <StackPanel VerticalAlignment="Top">
                            <Grid Name="gridPetrolDetails">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"></RowDefinition>
                                    <RowDefinition Height="auto"></RowDefinition>
                                    <RowDefinition Height="auto"></RowDefinition>
                                    <RowDefinition Height="auto"></RowDefinition>
                                    <RowDefinition Height="auto"></RowDefinition>
                                    <RowDefinition Height="auto"></RowDefinition>
                                    <RowDefinition Height="auto"></RowDefinition>
                                    <RowDefinition Height="auto"></RowDefinition>
                                </Grid.RowDefinitions>
                                <Grid.ColumnDefinitions>
                                    <ColumnDefinition Width="Auto"/>
                                    <ColumnDefinition Width="auto"/>
                                </Grid.ColumnDefinitions>
                                <Label Margin="5,5,5,0" HorizontalAlignment="Left" Grid.ColumnSpan="2" Grid.Row="0" FontWeight="Bold" FontSize="12">Transaction Details</Label>
                                <Label Margin="5,5,5,0" HorizontalAlignment="Right" Grid.Row="1" Grid.Column="0">Date</Label>
                                <my:DatePicker Grid.ColumnSpan="2" Grid.Row="1" Grid.Column="1" HorizontalAlignment="Left" Margin="5,5,5,0" Name="DatePickerPetrol" VerticalAlignment="Top" />

                                <Label Margin="5,5,5,0" HorizontalAlignment="Right" Grid.Row="2" Grid.Column="0">Vehicle</Label>
                                <ComboBox Margin="5,5,5,0" 
                                      HorizontalAlignment="Left" 
                                      Grid.Row="2" 
                                      Grid.Column="1"
                                      Width="200" 
                                      Name="comboboxVehicle" 
                                      Foreground="Black"
                                      IsSynchronizedWithCurrentItem="True"
                                      ItemsSource="{Binding}"
                                      Text="Select Vehicle ...">
                                    <ComboBox.Resources>
                                        <SolidColorBrush x:Key="{x:Static SystemColors.HighlightBrushKey}" Color="Silver" />
                                        <SolidColorBrush x:Key="{x:Static SystemColors.HighlightTextBrushKey}" Color="Black" />
                                    </ComboBox.Resources>
                                    <ComboBox.ItemTemplate>
                                        <DataTemplate>
                                            <StackPanel Orientation="Horizontal">
                                                <Image Height="32" Name="Image1" Width="32" Source="{Binding Path=image}" />
                                                <TextBlock Text="{Binding Path=vehicleDDLItems}" Margin="5,0,0,0" VerticalAlignment="Center"   />
                                            </StackPanel>
                                        </DataTemplate>
                                    </ComboBox.ItemTemplate>
                                </ComboBox>

                                <Label Margin="5,5,5,0" HorizontalAlignment="Right" Grid.Row="3" Grid.Column="0">Distance (Kms)</Label>
                                <TextBox Grid.Column="1" Grid.Row="3" HorizontalAlignment="Left" Margin="5,5,5,0" Name="TextBoxDistance" Width="120" />

                                <Label Margin="5,5,5,0" HorizontalAlignment="Right" Grid.Row="4" Grid.Column="0">Litres</Label>
                                <TextBox Grid.Column="1" Grid.Row="4" HorizontalAlignment="Left" Margin="5,5,5,0" Name="TextBoxLitres" Width="120" />

                                <Label Margin="5,5,5,0" HorizontalAlignment="Right" Grid.Row="5" Grid.Column="0">Amount $</Label>
                                <TextBox Grid.Column="1" Grid.Row="5" HorizontalAlignment="Left" Margin="5,5,5,0" Name="TextBoxAmount" Width="120" />

                                <Label Margin="5,5,5,0" HorizontalAlignment="Right" Grid.Row="6" Grid.Column="0">Amt/Ltr $</Label>
                                <TextBox Grid.Column="1" Grid.Row="6" HorizontalAlignment="Left" Margin="5,5,5,0" Name="TextBoxAmountPerLitre" Width="120" />

                                <Label Margin="5,5,5,0" HorizontalAlignment="Right" Grid.Row="7" Grid.Column="0">Comments</Label>
                                <TextBox Grid.Column="1" Grid.Row="7" HorizontalAlignment="Left" Margin="5,5,5,0" Name="TextBoxComment" Width="317" Height="90" TextWrapping="Wrap" VerticalScrollBarVisibility="Visible" AcceptsReturn="True" />
                            </Grid>
                        </StackPanel>
                    </ScrollViewer>
                </Border>

                <Border Name="mainOverlay" Grid.Row="1" CornerRadius="6,6,6,6">
                    <DockPanel VerticalAlignment="Stretch" HorizontalAlignment="Stretch" Background="LightBlue">
                        <DockPanel.OpacityMask >
                            <LinearGradientBrush StartPoint="0.5,1" EndPoint="0.5,1">
                                <GradientStop Color="#80000000" Offset="0.0" />
                                <GradientStop Color="#E6000000" Offset="0.5" />
                                <GradientStop Color="#80000000" Offset="1.0" />
                            </LinearGradientBrush>
                        </DockPanel.OpacityMask >
                        <Label  VerticalAlignment="Center" HorizontalAlignment="Center" Style="{StaticResource MyLabel}">empty record</Label>
                    </DockPanel>
                </Border> <!-- overlay -->
                
            </Grid>
            
        </Grid>
    </Grid>
</ribbon:RibbonWindow>
